<template>
  <div class="face" id="face">
    <i class="icon icon-face" title="表情" @click="toggleShow"></i>
    <main class="face-main" v-show="show" ref="dialog">
      <ul class="face-list" v-for="(item, index) in list" :key="index" v-show="currentIndex === index">
        <li class="face-list-item" v-for="(childrenItem, childrenIndex) in item" :key="childrenIndex"
          @click="select(childrenItem, childrenIndex)">
          <img v-if="index === 0" :src="emojiUrl + emojiMap[childrenItem]">
          <img v-else-if="index === 1" :src="divEmojiUrl + diyEmojiMap[childrenItem]">
          <img class="face-img" v-else :src="faceUrl + childrenItem + '@2x.png'">
        </li>
      </ul>
      <ul class="face-tab">
        <li class="face-tab-item" @click="selectFace(0)">
          <i class="icon icon-face"></i>
        </li>
        <li class="face-tab-item" @click="selectFace(1)">
          <img :src="divEmojiUrl + diyEmojiMap[list[1][0]]">
        </li>
        <li class="face-tab-item" v-for="(item, index) in bigEmojiList" :key="index" @click="selectFace(index+2)">
          <img :src="faceUrl + item.list[0] + '@2x.png'">
        </li>
      </ul>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, watchEffect, toRefs, computed, ref } from 'vue';
import { emojiUrl, emojiMap, emojiName, faceUrl, bigEmojiList, divEmojiUrl, diyEmojiMap, diyEmojiName } from '../../utils/emojiMap';
import { onClickOutside } from '@vueuse/core';

export default defineComponent({
  props: {
    show: {
      type: Boolean,
      default: () => false,
    },
    isMute: {
      type: Boolean,
      default: () => false,
    }
  },
  setup(props: any, ctx: any) {
    const data = reactive({
      emojiUrl,
      emojiMap,
      emojiName,
      divEmojiUrl,
      diyEmojiMap,
      diyEmojiName,
      faceUrl,
      bigEmojiList,
      show: false,
      currentIndex: 0,
      isMute: false,
      transDom: false,
    });

    const dialog: any = ref();

    watchEffect(() => {
      data.show = props.show;
      data.isMute = props.isMute;
    });

    const toggleShow = () => {
      const main: any = document.getElementsByClassName('face-main')[0];
      if (!data.isMute) {
        main.style.display = main.style.display === 'none' ? 'flex' : 'none';
      }
      if (main.style.display === 'none') {
        selectFace(0);
      }
    };

    onClickOutside(dialog, () => {
      const main: any = document.getElementsByClassName('face-main')[0];
      if (main) {
        main.style.display = 'none';
      }
    });

    const select = async (item: string, index: number) => {
      const options: any = {
        name: item,
      };
      switch (data.currentIndex) {
        case 0:
          options.type = 'emo';
          options.url = emojiUrl + emojiMap[item];
          options.template = `<img src="${emojiUrl + emojiMap[item]}">`;
          return ctx.emit('send', options);
        case 1:
          options.type = 'emo';
          options.url = divEmojiUrl + diyEmojiMap[item];
          options.template = `<img src="${divEmojiUrl + diyEmojiMap[item]}">`;
          return ctx.emit('send', options);
      }
    };

    /**
    * emoji 初始化
    * list
    * selectFace 
    */

    const list = computed(() => {
      const emjiList = [data.emojiName, data.diyEmojiName];
      for (let i = 0; i < data.bigEmojiList.length; i++) {
        emjiList.push(data.bigEmojiList[i].list);
      }
      return emjiList;
    });

    const selectFace = (index: number) => {
      data.currentIndex = index;
    };

    return {
      ...toRefs(data),
      toggleShow,
      select,
      selectFace,
      list,
      dialog,
    };
  },
});
</script>

<style lang="scss" scoped src="./style/index.scss">

</style>
